<template>
  <div class="container">
    <el-drawer
      custom-class="brand-dialog-min-width"
      title="日志"
      :visible.sync="showLogDrawer"
      direction="rtl"
      size="52%"
      :before-close="handleClose"
    >
      <!-- <el-col :span="24" class="commomPadding searchInputWidth"> -->
      <el-table
        :data="logData"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        style="border: 1px solid #dfe6ec"
        :max-height="tableHeight"
        v-loading="loading"
      >
        <el-table-column
          prop="createTime"
          label="请求时间"
          :formatter="formatTd"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="methodName"
          label="接口名称"
          width="230"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          label="状态"
          width="230"
          prop="message"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" width="110">
          <template slot-scope="scope">
            <el-link type="primary" @click="seeMessage(scope.row)"
              >查看报文</el-link
            >
          </template>
        </el-table-column>
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关信息"></emptyTable>
        </div>
      </el-table>
      <Pagination
        ref="pagination"
        @getList="getTableList"
        :filterField="filterField"
        :requestUrl="requestUrl"
      ></Pagination>
      <!-- </el-col> -->
      <el-drawer
        title="查看报文"
        :append-to-body="true"
        :before-close="handleCloseInner"
        :visible.sync="innerDrawer"
      >
        <div class="mainCon">
          <div class="clearfix">
            <p class="titleSty">请求报文：</p>
            <p class="reqInfo">{{ info.request }}</p>
          </div>
          <div class="returnBox clearfix">
            <p class="titleSty">响应报文：</p>
            <p class="returnInfo conStyle">{{ info.content }}</p>
          </div>
        </div>
      </el-drawer>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'logDetail',
  data() {
    return {
      logData: [],
      showLogDrawer: true,
      innerDrawer: false,
      info: {},
      filterField: {
        id: this.id,
      },
      requestUrl: 'api-out/sz/log/list',
      loading: false,
      isShow: false,
    }
  },
  props: {
    id: {
      type: String,
    },
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    getTableList(data) {
      this.logData = data
      this.loading = false
      if (this.logData.length < 1) {
        this.isShow = true
      }
    },
    handleClose() {
      this.$emit('closeLog')
    },
    seeMessage(row) {
      this.innerDrawer = true
      this.getLogDetail(row.id)
    },
    handleCloseInner() {
      this.innerDrawer = false
    },
    getLogDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-out/sz/log/detail',
        data: {
          id: id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.info = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
/deep/.el-drawer__body {
  padding: 0 24px 24px !important;
  overflow: auto !important;
}
.mainCon {
  padding-left: 24px;
  padding-right: 24px;
  height: calc(100% - 67px);
  overflow-y: auto;
  padding-top: 0;
  .returnBox {
    margin-top: 24px;
  }
  .reqInfo,
  .returnInfo {
    display: inline-block;
    height: 300px;
    width: 100%;
    padding: 12px;
    font-size: 14px;
    border: 1px solid #dee5f4;
    border-radius: 5px;
    overflow-y: auto;
    word-break: break-all;
  }
  .conStyle {
    height: 100px !important;
  }
  .titleSty {
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
  }
}
</style>
